<template>
	<div>
		<div v-if="commentShow">
			<div style="display: flex; align-items: center">
				<div style="margin-left: 1vw">
					<el-image
						:src="commentatorData.avatar"
						fit="fill"
						style="height: 3vw; width: 3vw; border-radius: 50%"
					></el-image>
				</div>
				<div style="margin-left: 1.5vw">
					<el-text
						type="primary"
						size="small"
						style="font-weight: bold"
						>{{ commentatorData.nickname }}</el-text
					>
				</div>
			</div>
			<div style="margin: 0vh 1vw 2vh 5.5vw">
				<el-text>
					{{ commentData.content }}
				</el-text>
			</div>
		</div>
		<div v-else>
			<el-skeleton :rows="2" animated />
		</div>
	</div>
</template>

<script setup>
import { onBeforeMount, toRefs } from 'vue';
import axios from 'axios';
import getFile from '../utils/getAssetsFile.js';

const props = defineProps({
	commentData: {
		default: null,
	},
});
const { commentData } = toRefs(props);

const commentatorData = ref(null);
const commentShow = ref(false);

onBeforeMount(async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserMsg',
			method: 'post',
			data: {
				state: 'basedUsername',
				username: commentData.value.commentator,
			},
		});
		if (res.data.state === 'ok') {
			commentatorData.value = res.data.data;
			if (!commentatorData.value.avatar) {
				commentatorData.value.avatar = getFile.getAssetsFile(
					'img',
					'未登录头像.png'
				);
			}
			if (!commentatorData.value.nickname) {
				commentatorData.value.nickname = `新用户${commentatorData.value.id}号`;
			}
			commentShow.value = true;
		}
	} catch (error) {
		console.log(1);
		console.log(error);
	}

	console.log(commentatorData.value);
});
</script>

<style></style>
